前言

今天來介紹justify-content屬性，在開始介紹之前我先插個話題，來聊聊justify這一詞來源。

justify與對齊的故事

這段與程式碼無關，甚至可以當故事去看，單純是我一個好奇心之下搜尋justify-content為何是使用justify？
如果直接拿justify查中文解釋通常會得到「為...辯護/解釋」、「證明(某事物)正當/正確」，一定會覺得很疑惑，這些意思跟justify-content功能都不相關。

Microsoft Word上的justify

首先搜尋到justify這一詞有與排版對齊相關來源是Microsoft Word。

根據Microsoft Word介紹一文中對齊功能出現「Justify Text」（左右對齊文字）這一詞，它的功能描述是「在左右對齊的段落中，文字會與兩個邊界對齊」。

但到這裡只能解釋Microsoft Word是拿justify這一詞來命名它的左右文字對齊功能，然後CSS也同樣拿來命名對齊內容。

justify詞源

在Etymonline介紹justify的演變，在過去（追溯到14世紀或更早期），justify源自古法語 justifiier（服從法庭訴訟），這一詞在其他語系追溯也同樣有大致上與法律訴訟、執行正義、公平相關的意思；而後1600年代演變有「證明(某事物)正當性/正確性」的意思。

那一定覺得很奇怪，因為這個發展過程中都跟「對齊」扯不上關係。
但接下來不可考，我找不出可信服的資料，藉由網路上片段引述中唯一能知道的是justify表示對齊的來源可能與「活版印刷(letterpress)」有關。

justify與活版印刷

To make exact; to fit or arrange exactly; to adjust to exact shape, size, or position. Now only in technical use; esp. (Type-founding).
（justify語意）使之準確/精確;精確的安裝或安排;調整為精確的形狀、大小或位置。現在僅用於技術用途;特別是 Type-founding。
（文字片段取自這裡）

Type-founding意思是印刷術語中的鑄字，在活版印刷中，排版工人會手動把一個個金屬字母排列到一個排版框裡，形成一段段文字；而每一個字母（稱為「字模」或「活字」）會依據字體、大小和寬度來用金屬鑄造成統一規格。
或許那時印刷業界內使用了justify來描述調整字與字之間適當距離或是製作字模板的精細工作，甚至排版工人也是稱呼為justifier。

CSS中的對齊

既然知道justify-content屬性是與對齊相關，那接下來繼續討論CSS排版與對齊是如何互相影響。

Alignment 對齊

當一個彈性容器的內容完成彈性分配，以及所有彈性項目的尺寸都確定之後，這些項目就可以在容器中對齊（align）。

margin 屬性可以用來對齊項目，方式類似於區塊排版（block layout），但功能更強大。

彈性項目也遵循 CSS Box Alignment 的屬性，這些屬性讓我們可以用關鍵字來輕鬆地對齊項目，無論是在主軸還是交叉軸方向。
這些屬性讓很多常見的對齊方式變得非常簡單，甚至包含一些在 CSS 2.1 時期非常困難的對齊，例如水平與垂直置中。

總結這段話：
意思是：先排版、後對齊。
Flexbox 會先根據 flex-grow, flex-shrink, flex-basis 等屬性計算出每個項目的大小，最後再使用對齊屬性來決定它們在容器中的最終位置。

margin: auto 可以讓 flex item 自動占據剩餘空間，實現居中。
在 block layout 中，margin: auto 通常只能水平方向居中，但在 Flexbox 中可以在主軸（main axis）或交叉軸（cross axis）方向上實現更靈活的對齊。

Flexbox 完成彈性排版後，可以透過 margin 和對齊屬性 (justify-content, align-items 等) 來精確地控制元素的對齊方式，讓許多以前困難的版面需求變得非常簡單。

資料參考

書籍<CSS大全第四版>
CSS Flexible Box Layout Module Level 1 -8.